<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html xmlns:v >
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<head id="Head1" >
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>设计可视化图</title>

	<link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.4.1/themes/default/easyui.css">
	<link href="css/flowPath.css" type="text/css" rel="stylesheet" />

	<STYLE>
		v\:*{behavior:url(#default#VML);}
	</STYLE>
	
	<script type="text/javascript">
		 var common_contextPath = '<%=basePath%>';
	</script>

</head>

<body class="easyui-layout bodySelectNone" id="body" onselectstart="return false">
	<input type="hidden"  value="${visualEntity.id}" id="visualid"/>
	<div id="title" region="north" split="true" border="false" title="工具栏" class="titleTool">
		<div id="message" class="message"></div>	
		<img alt="合并" title="合并" src="images/1.png" onclick="graphUtils.toMerge()" class="buttonStyle" />
		<img alt="拆分" title="拆分" src="images/2.png" onclick="graphUtils.toSplit()" class="buttonStyle"/>
		<img alt="置顶"	title="置顶" src="images/4.png" onclick="graphUtils.toTop()" class="buttonStyle"/>
		<img alt="置底"	title="置底" src="images/3.png" onclick="graphUtils.toBottom()" class="buttonStyle"/>
		<img alt="撤销"	title="撤销" src="images/back.png" onclick="graphUtils.undo();" class="buttonStyle"/>
		<img alt="重做"	title="重做" src="images/next.png" onclick="graphUtils.redo();" class="buttonStyle"/>
		<img alt="保存"	title="保存" src="images/save.png" onclick="graphUtils.saveXml();" class="buttonStyle"/>
		<img alt="加载"	title="加载" src="images/download_page.png" onclick="graphUtils.loadXml();" class="buttonStyle"/>
		<img alt="清空"	title="清空" src="images/trash.png" onclick="graphUtils.clearHtml();" class="buttonStyle"/>
		<img alt="复制"	title="复制" src="images/copy.png" onclick="graphUtils.copyNode();" class="buttonStyle"/>
		<img alt="删除"	title="删除" src="images/delete.png" onclick="graphUtils.removeNode();" class="buttonStyle"/>
		<img alt="左对齐"	title="左对齐" src="images/toLeft.png" onclick="graphUtils.alignLeft();" class="buttonStyle"/>
		<img alt="垂直居中"	title="垂直居中" src="images/toMiddleWidth.png" onclick="graphUtils.verticalCenter();" class="buttonStyle"/>
		<img alt="右对齐"	title="右对齐" src="images/toRight.png" onclick="graphUtils.alignRight();" class="buttonStyle"/>
		<img alt="顶对齐"	title="顶对齐" src="images/toTop.png" onclick="graphUtils.alignTop();" class="buttonStyle"/>
		<img alt="水平居中"	title="水平居中" src="images/toMiddleHeight.png" onclick="graphUtils.horizontalCenter();" class="buttonStyle"/>
		<img alt="底对齐"	title="底对齐" src="images/toBottom.png" onclick="graphUtils.bottomAlignment();" class="buttonStyle"/>
		
	</div>
	
	<div id="leftContent" region="west" split="true" title="图元区" class="leftContent" >
		
		<div class="easyui-accordion overflowHidden" fit="true" border="false">
			
				<div title="可视化图形" style="overflow:hidden;background-color:#c7dbfc;">

					<div id="node1" divType="mode" style="position:absolute;left:10px;top:20px;">
						<div id="title" class="title">热点</div>
						<img id="backGroundImg" src="images/business.png" class="nodeStyle" title="热点"/>
					</div>
					
					<div id="label1" divType="label" style="position:absolute;left:50px;top:20px;">
						<div id="title" class="title">文本</div>
						<img id="backGroundImg" src="images/label.png" class="nodeStyle" title="文本"/>
					</div>
					
					<div id="node2" divType="mode" style="position:absolute;left:90px;top:20px;">
						<div id="title" class="title">人员</div>
						<img id="backGroundImg" src="images/person.png" class="nodeStyle" title="人员"/>
					</div>
					
					<div id="node3" divType="mode" style="position:absolute;left:10px;top:80px;">
						<div id="title" class="title">仪器</div>
						<img id="backGroundImg" src="images/equipment.png" class="nodeStyle" title="仪器"/>
					</div>

					<div id="node4" divType="mode" style="position:absolute;left:50px;top:80px;">
						<div id="title" class="title">红绿灯</div>
						<img id="backGroundImg" src="images/green.png" class="nodeStyle" title="红绿灯"/>
					</div>
					
					<div id="node5" divType="mode" style="position:absolute;left:90px;top:80px;">
						<div id="title" class="title">仪器人员</div>
						<img id="backGroundImg" src="images/equipmentperson.png" class="nodeStyle" title="仪器人员"/>
					</div>
					
					<div id="node6" divType="mode" style="position:absolute;left:10px;top:150px;">
						<div id="title" class="title">仪器数据</div>
						<img id="backGroundImg" src="images/equipmentdata.png" class="nodeStyle" title="仪器数据"/>
					</div>
					
					<div id="node7" divType="mode" style="position:absolute;left:50px;top:150px;">
						<div id="title" class="title">仪器任务</div>
						<img id="backGroundImg" src="images/equipmenttask.png" class="nodeStyle" title="仪器任务"/>
					</div>
					
					<div id="node8" divType="mode" style="position:absolute;left:90px;top:150px;">
						<div id="title" class="title">视频</div>
						<img id="backGroundImg" src="images/video.png" class="nodeStyle" title="视频"/>
					</div>
					
					<div id="node1" divType="mode" style="position:absolute;left:10px;top:220px;">
						<div id="title" class="title">远程连接</div>
						<img id="backGroundImg" src="images/businessblank.png" class="nodeStyle" title="远程连接"/>
					</div>
					
				</div>
			</div>
			
	</div>
	
	<div region="center" title="绘图区" id="contextBody" class="mapContext" style="background:#fff url(<%=basePath%>/visual/picfile/${visualEntity.picaddress }) no-repeat;" >
			
			<!-- Line右键菜单 -->
			<div id="lineRightMenu" class="modeRight">
				<div class="modeRightTop"></div>
				<div class="modeRightDel" onmousemove="this.style.backgroundColor='#c5e7f6'" onclick="graphUtils.removeNode();" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">删 除</span></div>
				<div class="modeRightPro" onmousemove="this.style.backgroundColor='#c5e7f6'" onclick="graphUtils.showLinePro();" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">属 性</span></div>
				<div class="modeRightButtom"></div>
			</div>
					
			<!-- Mode右键菜单 -->
			<div id="rightMenu" class="modeRight">
				<div class="modeRightTop"></div>
				<div class="modeRightCopy" onmousemove="this.style.backgroundColor='#c5e7f6'" onclick="graphUtils.copyNode();" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">复 制</span></div>
				<div class="modeRightDel" onmousemove="this.style.backgroundColor='#c5e7f6'" onclick="graphUtils.removeNode();" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">删 除</span></div>
				<div class="modeRightPro" onmousemove="this.style.backgroundColor='#c5e7f6'" onclick="graphUtils.showModePro();" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">属 性</span></div>
				<div class="modeRightButtom"></div>
			</div>
			
			<!-- PathBody右键菜单 -->
			<div id="pathBodyRightMenu" class="modeRight">
				<div class="modeRightTop"></div>
				<div class="modeRightPixel" id="isPixel" onclick="global.baseTool.changStyle(this);" onmousemove="this.style.backgroundColor='#c5e7f6'" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">Pixel</span></div>
				<div class="modeRightLeft" onclick="graphUtils.alignLeft();" onmousemove="this.style.backgroundColor='#c5e7f6'" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">左对齐</span></div>
				<div class="modeRightCenter" onclick="graphUtils.verticalCenter();" onmousemove="this.style.backgroundColor='#c5e7f6'" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">垂直居中</span></div>
				<div class="modeRightRight" onclick="graphUtils.alignRight();" onmousemove="this.style.backgroundColor='#c5e7f6'" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">右对齐</span></div>
				<div class="modeRightHead" onclick="graphUtils.alignTop();" onmousemove="this.style.backgroundColor='#c5e7f6'" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">顶部对齐</span></div>
				<div class="modeRightMiddle" onclick="graphUtils.horizontalCenter();" onmousemove="this.style.backgroundColor='#c5e7f6'" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">水平居中</span></div>
				<div class="modeRightFoot" onclick="graphUtils.bottomAlignment();" onmousemove="this.style.backgroundColor='#c5e7f6'" onmouseout="this.style.backgroundColor=''"><span class="menuSpan">底端对齐</span></div>
				<div class="modeRightButtom"></div>
			</div>
			
		 	<div id="topCross"></div>
      <div id="leftCross"></div>
	
	</div>

	<div region="east" split="true" title="历史操作" class="history">
		<div id="historyMessage" class="historyMessage"></div>
	</div>
	
	<div region="south"  split="true" title="辅助区" class="auxiliaryArea" >
		<!-- 小地图 -->	
		<div id="smallMap"></div> 
		
		<div id="mainControl">
			
			<div id="tab" class="control">
	
				<h3 id="h1" class="hclass" onClick="hOnMouseOver(this, '1')">
					&nbsp;<img src="images/img1.png" style="vertical-align:middle;" />&nbsp;&nbsp;热点名称
				</h3>
					<div id="tab1" class="htabup">
						
						<table cellpadding="0" cellspacing="0">
							<tr>
									<td style="text-align:center;height:25px;">
										节点ID
									</td>									
									<td >
										<input type="text" id="inputId" class="inputComm" style="width:300px;"/>
									</td>
							</tr>
							<tr>
									<td style="text-align:center;height:25px;">
										节点名称
									</td>									
									<td >
										<input type="text" id="inputTitle" class="inputComm" style="width:300px;"/>
									</td>
							</tr>
							<tr>
									<td style="width:70px;text-align:center;">
										描述
									</td>									
									<td >
										<textarea rows="2" id="modeContent" class="contextArea" ></textarea>
									</td>
							</tr>
								
						</table>	

					</div>
				
			 <h3 id="h2" class="hclass" onClick="hOnMouseOver(this, '2')">
			 	&nbsp;<img src="images/img2.png" style="vertical-align:middle;" />&nbsp;&nbsp;热点属性
			 	</h3>
					<div id="tab2" class="htab">
						<table cellpadding="0" cellspacing="0">
							<tr>
									<td style="width:70px;height:25px;text-align:center;">
										宽
									</td>									
									<td>
										<input type="text" id="inputWidth" class="inputComm" style="width:130px;"/>
									</td>
									<td style="width:70px;text-align:center;">
										高
									</td>									
									<td>
										<input type="text" id="inputHeight" class="inputComm" style="width:130px;" />
									</td>
									
							</tr>
							<tr>
									<td style="text-align:center;">
										上边距
									</td>									
									<td>
										<input type="text" id="inputTop" class="inputComm" style="width:130px;" />
									</td>
									<td style="text-align:center;">
										左边距
									</td>									
									<td>
										<input type="text" id="inputLeft" class="inputComm" style="width:130px;" />
									</td>
							</tr>

							<tr style="display:none;">
									<td style="width:70px;text-align:center;">
										背景图
									</td>
									
									<td colspan="3">
										<input type="text" id="inputImgSrc" class="inputComm" style="width:367px;" />
									</td>
							</tr>	
						</table>	
					</div>
					<h3 id="h3" class="hclass" onClick="hOnMouseOver(this, '3')" >
					&nbsp;<img src="images/img3.png" style="vertical-align:middle;" />&nbsp;&nbsp;关联项</h3>
					<div id="tab3" class="htab" >
							
						<table cellpadding="0" cellspacing="0">
							<tr id="hid1">
									<td style="width:70px;text-align:center;">
										模型名称
									</td>
									<td >
										<input type="text" id="inputChildvisual" class="inputComm" style="width:367px;" /><a href="#" onclick="openChild('inputChildvisual')">浏览</a>
									</td>
							</tr>
							<tr id="hid2">
									<td style="width:70px;text-align:center;">
										模型地址
									</td>
									<td >
										<input type="text" id="inputChildvisualurl" class="inputComm" style="width:367px;" />
									</td>
							</tr>
								
						</table>
						<input type="hidden" id="inputChildvisualid" class="inputComm">
							
					</div>

			</div>
			
		</div>
		<div id="show" class="show">
			<div id="modeCount" class="showItem"></div>
		</div>
	
	</div>
	
	<!-- 移动时的图象 -->
	<div id="moveBaseMode" class="moveBaseMode">
		<img id="moveBaseModeImg"  src="images/Favourite.png" class="nodeStyle"/>
	</div>
	
	<div id="prop" style="visibility: hidden;">
				Dialog Content.  
	</div>
	
	<SPAN id="wenzi1" style="DISPLAY: none; Z-INDEX: 2000; POSITION: absolute">
	    <!--插入文字可视化--><TEXTAREA id=txt1 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 300px; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px"></TEXTAREA><BR>
        <CENTER>字体:
        <SELECT id=wenziziti style="WIDTH: 100px" onchange=gengxinwenzi.click()>
            <OPTION selected>宋体<OPTION>黑体<OPTION>隶书<OPTION>幼圆<OPTION>楷体_GB2312<OPTION>仿宋_GB2312<OPTION>华文中宋<OPTION>华文行楷<OPTION>华文新魏<OPTION>华文细黑
            <OPTION>华文彩云<OPTION>方正姚体<OPTION>方正舒体<OPTION>Wingdings<OPTION>Wingdings 2<OPTION>Wingdings 3<OPTION>Webdings<OPTION>System<OPTION>@宋体
            <OPTION>@黑体<OPTION>@隶书<OPTION>@幼圆<OPTION>@楷体_GB2312<OPTION>@仿宋_GB2312<OPTION>@华文中宋<OPTION>@华文行楷<OPTION>@华文新魏<OPTION>@华文细黑
            <OPTION>@华文彩云<OPTION>@方正姚体<OPTION>@方正舒体<OPTION>@System</OPTION></SELECT>
            <BR>颜色：<INPUT onchange=gengxinwenzi.click() id=wenziyanse 
            style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 50px; 
            BORDER-BOTTOM: black 1px solid; HEIGHT: 17px" value=#000000>背景：<INPUT  onchange="gengxinwenzi.click()" id=wenzibeijing 
            style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 50px; 
            ORDER-BOTTOM: black 1px solid; HEIGHT: 17px" value=''>大小：<SELECT id=wenzidaxiao style="WIDTH: 50px" onchange=gengxinwenzi.click()><OPTION selected>12
        <SCRIPT>      for (i = 1; i < 101; i++) document.write("<option>" + i)</SCRIPT>
               </OPTION></SELECT><BR><INPUT class=bon2 id=gengxinwenzi onclick="gengxintxt() "
                    type="button" value="浏览更新"  style="display:none;"><INPUT class=bon2 onclick=charuwenzi() type=button value=插入><INPUT class=bon2 onclick="wenzi1.style.display='none'" type=button value=取消> 
               <INPUT class=bon2 onclick="dellabel()" type=button value=删除>
    </SPAN>
	
	<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
	<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
	<script src="js/strawberry.min.js" type="text/javascript" language="javascript"></script>
	
	<script>

	    var mainControl = $id("mainControl");
	    mainControl.style.width = (document.body.offsetWidth - 412) + "px";

	    var bgImg = "url(images/bg.gif)";
	    var backColor = "#e0ecff";
	    function hOnMouseOver(tagObj, index) {
	        var h1 = $id("h1");
	        var h2 = $id("h2");
	        var h3 = $id("h3");

	        var tab1 = $id("tab1");
	        var tab2 = $id("tab2");
	        var tab3 = $id("tab3");

	        var setHClass = function(obj, colorValue, indexValue) {

	            obj.style.background = colorValue;
	            obj.style.zIndex = indexValue;

	        }

	        var setTagClass = function(obj, className) {

	            obj.setAttribute("class", className);
	            obj.setAttribute("className", className);

	        }

	        setHClass(h1, bgImg, "1");
	        setHClass(h2, bgImg, "1");
	        setHClass(h3, bgImg, "1");

	        setTagClass(tab1, "htab");
	        setTagClass(tab2, "htab");
	        setTagClass(tab3, "htab");

	        setHClass(tagObj, backColor, "3");
	        setTagClass($id("tab" + index), "htabup");

	    }

	    jQuery(document).ready(function() {

	        $id("h1").style.background = "#e0ecff";
	        $id("h1").style.zIndex = "3";

	        var global = com.xjwgraph.Global;

	        graphUtils = com.xjwgraph.Utils.create({

	            contextBody: 'contextBody',
	            width: 1600,
	            height: 1000,
	            smallMap: 'smallMap',
	            mainControl: 'mainControl',
	            historyMessage: 'historyMessage',
	            prop: 'prop'

	        });

	        
	        graphUtils.nodeDrag($id("label1"), "label");
	        var modes = jQuery("[divType='mode']");
	        var modeLength = modes.length;

	        for (var i = 0; i < modeLength; i++) {
	            graphUtils.nodeDrag(modes[i]);
	        }

	        document.body.onclick = function() {

	            if (!stopEvent) {
	                global.modeTool.clear();
	            }
	        }

	        document.onclick = countModule;
	        document.onkeydown = KeyDown;
	        var xmlDoc = new ActiveXObject('MSXML2.DOMDocument');
    		xmlDoc.async = false;
    		
    		xmlDoc.load('<%=basePath%>/visual/data/${visualEntity.filename}');
    		var xmlText = xmlDoc.xml;
	        //var xmlText = '${content}';
	        if (xmlText != '') {
	            graphUtils.loadTextXml(xmlText);
	        }
	        
	        function countModule() {

	            stopEvent = false;

	            var lineCount = global.lineMap.size();
	            var modeCount = global.modeMap.size();
	            var contextCount = global.baseTool.contextMap.size();

	            //$id("lineCount").innerHTML = "线总数:" + lineCount;
	            $id("modeCount").innerHTML = "模型数:" + modeCount;
	            //$id("contextCount").innerHTML = "区域数:" + contextCount;
	        }
	        countModule();
	    });

	    function openChild(childname) {
	        if (childname == 'inputChildvisual') {
	        	var visualId = ${visualId};
	        	var a = com.xjwgraph.Global,
                N = a.controlTool;
                if (!$id("module" + N.indexId)) {
                    return
                }
                var l = $id("module" + N.indexId);
                var q = $id("backImg" + N.indexId),
        		n = q.src;
        		var type = n.substring(n.lastIndexOf('/')+1, n.indexOf('.'));
                if (type=="business"){
                	var returnValues = window.showModalDialog("chooseVisual2.jsp?visualId="+visualId+"&temp="+new Date(), window, "dialogWidth:550px;status:no;dialogHeight:550px;scroll=no");
		            if (returnValues != null) {
	        			var temp = document.getElementById(childname);
	        			var retrurnList = returnValues.split(',');
		                temp.value = retrurnList[1]
		                var inputChildvisualid = retrurnList[0];
		                var tempurl = document.getElementById(childname+"url");
		                tempurl.value ="visualAction!viewVisual.action?id="+retrurnList[0];
	                    l.setAttribute("inputChildvisual", retrurnList[1]);
	                    l.setAttribute("inputChildvisualurl", "visualAction!viewVisual.action?id="+retrurnList[0]);
	                    l.setAttribute("inputChildvisualid", retrurnList[0]);
	        		}
                }
	            else if(type=="person"){
	            	//alert("人员");
	            	var returnValues = window.showModalDialog("chooseUsersIndex.jsp?visualId="+visualId+"&temp="+new Date(), window, "dialogWidth:1000px;status:no;dialogHeight:600px;scroll=no");
		            if (returnValues != null) {
	        			var temp = document.getElementById(childname);
	        			var retrurnList = returnValues.split(',');
		                temp.value = retrurnList[1]
		                var inputChildvisualid = retrurnList[0];
		                var tempurl = document.getElementById(childname+"url");
		                tempurl.value ="visualAction!designviewPerson.action?testId="+retrurnList[0];
	                    l.setAttribute("inputChildvisual", retrurnList[1])
	                    l.setAttribute("inputChildvisualurl", "visualAction!designviewPerson.action?testId="+retrurnList[0])
	                    l.setAttribute("inputChildvisualid", retrurnList[0]);
	                }
	            }
	            else if(type=="equipment"){
	            	//alert("仪器");
	            	var returnValues = window.showModalDialog("<%=request.getContextPath() %>/equipmentLibrary/equipmentLibraryAction!gotoList22.action?formid=2221&sbtype=1&visualId="+visualId+"&temp="+new Date(), window, "dialogWidth:1000px;status:no;dialogHeight:600px;scroll=no");
		            if (returnValues != null) {
	        			var temp = document.getElementById(childname);
	        			var retrurnList = returnValues.split(',');
		                temp.value = retrurnList[1]
		                var inputChildvisualid = retrurnList[0];
		                var tempurl = document.getElementById(childname+"url");
		                tempurl.value ="/equipmentLibrary/equipmentLibraryAction!gotoList22.action?formid=2221&sbtype=1&id="+retrurnList[0];
	                    l.setAttribute("inputChildvisual", retrurnList[1])
	                    l.setAttribute("inputChildvisualurl", "/equipmentLibrary/equipmentLibraryAction!gotoList22.action?formid=2221&sbtype=1&id="+retrurnList[0])
	                    l.setAttribute("inputChildvisualid", retrurnList[0]);
	                }
	            }else if(type=="green"){
	            	//alert("红绿灯");
	            	var returnValues = window.showModalDialog("<%=request.getContextPath() %>/equipmentLibrary/equipmentLibraryAction!gotoList22.action?formid=2221&sbtype=1&visualId="+visualId+"&temp="+new Date(), window, "dialogWidth:1000px;status:no;dialogHeight:600px;scroll=no");
		            if (returnValues != null) {
	        			var temp = document.getElementById(childname);
	        			var retrurnList = returnValues.split(',');
		                temp.value = retrurnList[1]
		                var inputChildvisualid = retrurnList[0];
		                var tempurl = document.getElementById(childname+"url");
		                tempurl.value ="visualAction!designRGBById.action?id="+retrurnList[0];
	                    l.setAttribute("inputChildvisual", retrurnList[1]);
	                    l.setAttribute("inputChildvisualurl", "visualAction!designRGBById.action?id="+retrurnList[0]);
	                    l.setAttribute("inputChildvisualid", retrurnList[0]);
	                }
	            }else if(type=="equipmentperson"|| type=="equipmentdata" || type=="equipmenttask"){
	            	var returnValues = window.showModalDialog("<%=request.getContextPath() %>/equipmentLibrary/equipmentLibraryAction!gotoList22.action?formid=2221&sbtype=1&visualId="+visualId+"&temp="+new Date(), window, "dialogWidth:1000px;status:no;dialogHeight:600px;scroll=no");
		            if (returnValues != null) {
	        			var temp = document.getElementById(childname);
	        			var retrurnList = returnValues.split(',');
		                temp.value = retrurnList[1]
		                var inputChildvisualid = retrurnList[0];
		                var tempurl = document.getElementById(childname+"url");
	                    l.setAttribute("inputChildvisual", retrurnList[1])
	                    l.setAttribute("inputChildvisualid", retrurnList[0]);
	                }
	            }
	        }

	    }
	    
	    var contextBody = document.getElementById("contextBody");
	    var txt1 = document.getElementById("txt1");
	    var wenziyanse = document.getElementById("wenziyanse");
	    var wenzibeijing = document.getElementById("wenzibeijing");
	    var wenzidaxiao = document.getElementById("wenzidaxiao");
	    var wenziziti = document.getElementById("wenziziti");
	    var gengxinwenzi = document.getElementById("gengxinwenzi");
	    var xx;
	    var yy;
	    var zz = 2000;
	    var temp;
	    var isshowtxt1 = 1;
	    var wenzi1 = document.getElementById("wenzi1");
	    function charuwenzi() { //插入文字
	        if (temp == undefined) {
	            if (txt1.value == "") return alert('请先输入文字，在点击插入');
	            var newtxt = document.createElement("<span class='label' onclick='showlocaltext(this);' style='position:absolute;z-index:" + zz + ";left:" + xx + ";top:" + yy + ";color:" + wenziyanse.value + ";background-color:" + wenzibeijing.value + ";font-size:" + wenzidaxiao.options[wenzidaxiao.selectedIndex].text + ";font-family:" + wenziziti.options[wenziziti.selectedIndex].text + ";'></span>");
	            newtxt.innerText = txt1.value;
	            contextBody.appendChild(newtxt);
	            wenzi1.style.display = 'none';

	            //随动事件
	            newtxt.onmousedown = function(i) {
	                i = i || window.event;
	                var h = this,
                    g = h.style;
	                if (h.setCapture) {
	                    h.setCapture()
	                } else {
	                    if (window.captureEvents) {
	                        document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP)
	                    }
	                }
	                var f = i.clientX ? i.clientX : i.offsetX,
                    l = i.clientY ? i.clientY : i.offsetY;
	                var offsetx = f - i.srcElement.offsetLeft;
	                var offsety = l - i.srcElement.offsetTop;
	                g.left = (f - offsetx) + "px";
	                g.top = (l - offsety) + "px";
	                var j = document;
	                isshowtxt1 = 1;
	                j.onmousemove = function(o) {
	                    o = o || window.event;
	                    var n = o.clientX,
                        m = o.clientY;
	                    g.left = (n - offsetx) + "px";
	                    g.top = (m - offsety) + "px";
	                    isshowtxt1 = 0;
	                };
	                j.onmouseup = function(q) {
	                    q = q || window.event;
	                    if (h.releaseCapture) {
	                        h.releaseCapture()
	                    } else {
	                        if (window.releaseEvents) {
	                            document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP)
	                        }
	                    }
	                    j.onmousemove = null;
	                    j.onmouseup = null;
	                    if (!q.pageX) {
	                        q.pageX = q.clientX
	                    }
	                    if (!q.pageY) {
	                        q.pageY = q.clientY
	                    }
	                }
	            }
	            //随动事件结束
	        }
	        else {
	            if (txt1.value == "") return alert('请先输入文字，在点击插入');
	            gengxin();
	            wenzi1.style.display = 'none';
	        }
	    }


	    function showtext(txtx,txty,labelx,labely) {
	        wenzi1.style.left = txtx;
	        wenzi1.style.top = txty;
	        wenzi1.style.display = "";
	        xx = labelx;
	        yy = labely;
	    }

	  function showlocaltext(target) {
	        temp = target;
	        if (isshowtxt1 == 1) {
	            wenzi1.style.display = "";
	        }
	        var cb = document.getElementById("contextBody");
	        wenzi1.style.left = parseInt(target.style.left) - cb.scrollLeft+"px";
	        wenzi1.style.top =  parseInt(target.style.top) - cb.scrollTop+"px";
	    }


	    function gengxin() { //更新文本
	        temp.innerHTML = txt1.value;
	        temp.style.color = wenziyanse.value;
	        temp.style.backgroundColor = wenzibeijing.value;
	        temp.style.fontSize = wenzidaxiao.options[wenzidaxiao.selectedIndex].text+"px";
	        temp.style.fontFamily = wenziziti.options[wenziziti.selectedIndex].text;
	    }

	    function dellabel() {
	        temp.parentNode.removeChild(temp);
	        wenzi1.style.display = 'none';
	    }

	    function gengxintxt() { //更新文本
	        txt1.style.color = wenziyanse.value;
	        txt1.style.backgroundColor = wenzibeijing.value;
	        txt1.style.fontSize = wenzidaxiao.options[wenzidaxiao.selectedIndex].text;
	        txt1.style.fontFamily = wenziziti.options[wenziziti.selectedIndex].text;
	    }
		
	</script>

</html>
